<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/popBox.css">
    <link rel="stylesheet" href="css/adv.css">
    <link rel="stylesheet" href="css/shopDetail.css">
    <link rel="stylesheet" href="css/shopCommit.css">
    <!-- fontawesome字体 -->
    <link rel="stylesheet" href="font/font-awesome.min.css">
</head>

<body>
    <!-- 头部 -->
    <div id="header">
        <div class="headerBox">
            <ul class="headerBox_left">
                <li class="activate_font"><a href="index.html" class="activate_font">书瞳</a></li>
                <li><a href="login.html">登录</a></li>
                <li><a href="register.html">注册</a></li>
            </ul>

            <ul class="headerBox_right">
                <li><a href="star.html"><i class="fa fa-star activate_font"></i>&nbsp;&nbsp;收藏</a></li>
                <li><a href="cart.html"><i class="fa fa-cart-plus activate_font"></i>&nbsp;&nbsp;购物车</a></li>
                <li class="my">
                    <div>我的&nbsp;&nbsp;<i class="fa fa-caret-left activate_font"></i></div>
                    <ul class="mylist">
                        <li><a href="order.html">订单</a></li>
                        <li><a href="consignee.html">收货地址</a></li>
                        <li><a href="#" class="changePwd">修改密码</a></li>
                    </ul>

                </li>
            </ul>
        </div>

        <!-- 修改密码隐藏框 -->
        <!-- 编辑弹出框 -->
        <div class="outsideLayer" style="display: none;"></div>
        <div id="pwd" class="popBox" style="display: none;">
            <div class="popTitle">
                <span>修改密码</span>
                <span><a href="#" class="dropPop">×</a></span>
            </div>
            <div class="popContent">
                <div class="popItem">
                    <span>新密码</span>
                    <div>
                        <input type="password" />
                    </div>
                </div>
                <div class="popItem">
                    <span>确认密码</span>
                    <div>
                        <input type="password">
                    </div>
                </div>

            </div>
            <div class="popBtn">
                <button class="ok" id="pwdok">确认修改</button>
                <button class="cancel dropPop">取消</button>
            </div>
        </div>
    </div>

    <!-- 广告导航 -->
    <div id="adv">
        <div class="advBox">
            <div class="logo">
                <a href="index.html">
                    <img src="image/logo.png" alt="">
                </a>
            </div>
            <div class="advContent">
                书瞳是一个专注于卖优质书籍的网站，给用户最好的体验，是我们永恒的目标。
            </div>
        </div>
    </div>

    <!-- 商品详情区域 -->
    <div id="shopDetail">
        <!-- 图片及轮播 -->
        <div class="shopLeft">
            <!-- 大图 -->
            <div id="shopLeftBox">
                <img src="image/10b.jpg" alt="" class="bimage">
                <span id="lay"></span>
            </div>

            <!-- 大图片 -->
            <div id="shopLeftBigBox">
                <img src="image/10b.jpg" alt="" class="bimage">
            </div>

            <!-- <img src="image/10b.jpg" alt=""> -->

            <!-- 小图 -->
            <div class="mt12">
                <img src="image/10b.jpg" alt="" class="simage ml12">
                <img src="image/10m.jpg" alt="" class="simage">
            </div>

        </div>

        <!-- 商品价格等 -->
        <div class="shopRight">
            <h3>算法导论</h3>

            <!-- 价格 -->
            <div class="priceArea">
                <div class="priceBox">
                    <div>
                        <span>现价</span>
                        <span class="yourprice">￥118.99</span>
                    </div>
                    <div>
                        <span>原价</span>
                        <span class="price">￥138.99</span>
                        <span class="discount">7.52折</span>
                    </div>
                </div>
                <span class="star"><a href="#">&#xf005 收藏</a></span>
            </div>

            <!-- 销量与评价 -->
            <div class="cArea">
                <div>
                    <span>月销量</span>
                    <span class="activate_font">3701</span>
                </div>
                <div>
                    <span>累计评价</span>
                    <span class="activate_font">12</span>
                </div>
            </div>

            <!-- 数量、库存 -->
            <div class="numArea">
                <span>数量</span>
                <div class="btnBox">
                    <button id="subShop">-</button>
                    <div>
                        <input type="text" value="1" id="shopNum">
                    </div>
                    <button id="addShop">+</button>
                </div>
                <span>库存123件</span>
            </div>

            <!-- 按钮 -->
            <div class="btnArea">
                <button class="buyNow">立即购买</button>
                <button class="toCart">&#xf217 加入购物车</button>
            </div>

        </div>
    </div>

    <!-- 商品介绍及评论 -->
    <div id="shopCommit">
        <div class="shopCommitTitle">
            <div class="activate" id="detailBtn">商品详情</div>
            <div id="commitBtn">评论 123</div>
        </div>

        <!-- 商品详情 -->
        <div class="shopCommitContent" id="shopCommitContent1">
            <div class="detailBox">
                <span>内容简介：</span>
                <span>本书既可作为高年级本科生或低年级研究生的数据库课程教材，也可供数据库领域的技术人员参考。本书既可作为高年级本科生或低年级研究生的数据库课程教材，也可供数据库领域的技术人员参考。本书既可作为高年级本科生或低年级研究生的数据库课程教材，也可供数据库领域的技术人员参考。</span>
            </div>
        </div>

        <!-- 评论 -->
        <div class="shopCommitContent" id="shopCommitContent2" style="display: none;">
            <!-- 一条评论 -->
            <div class="commitBox">
                <div class="commitBoxLeft">
                    <span>发货很快，书本质量很好，疯狂学习中~~</span>
                    <span class="sf mt12">2020-07-06 18:49:12</span>
                </div>
                <div class="commitBoxLeft sf">
                    123@qq.com
                </div>
            </div>

            <!-- 一条评论 -->
            <div class="commitBox">
                <div class="commitBoxLeft">
                    <span>发货很快，书本质量很好，疯狂学习中~~发货很快，书本质量很好，疯狂学习中~~发货很快，书本质量很好，疯狂学习中~~发货很快，书本质量很好，疯狂学习中~~发货很快，书本质量很好，疯狂学习中~~发货很快，书本质量很好，疯狂学习中~~发货很快，书本质量很好，疯狂学习中~~发货很快，书本质量很好，疯狂学习中~~</span>
                    <span class="sf mt12">2020-07-06 18:49:12</span>
                </div>
                <div class="commitBoxLeft sf">
                    123@qq.com
                </div>
            </div>

            <!-- 没有评论时显示 -->
            <div class="commitBox" style="display: none;">
                <div class="commitBoxLeft">
                    <span class="activate_font">恭喜你发现了新大陆！来发表第一条评论吧！</span>
                </div>

            </div>
        </div>
    </div>

    <!-- js代码 -->
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/header.js"></script>
    <script>
        $(function () {
            //减少商品数量
            $('#subShop').click(function () {
                if($('#shopNum').val() == "1"){
                    return;
                }
                let num = parseInt($('#shopNum').val())-1;
                $('#shopNum').val(num);
            });

            //添加商品数量
            $('#addShop').click(function () {
                let num = parseInt($('#shopNum').val())+1;
                $('#shopNum').val(num);
            });


            //商品详情被点击
            $('#detailBtn').click(function () {
                $('#detailBtn').addClass('activate');
                $('#shopCommitContent1').show();
                $('#commitBtn').removeClass('activate');
                $('#shopCommitContent2').hide();
            });


            //评论被点击
            $('#commitBtn').click(function () {
                $('#detailBtn').removeClass('activate');
                $('#shopCommitContent1').hide();
                $('#commitBtn').addClass('activate');
                $('#shopCommitContent2').show();
            });


            // 鼠标移入小图、替换大图
            $('.simage').mouseover(function (ele) {
                let src = $(this).attr('src');
                $('.bimage').attr('src', src);
                // document.getElementById("bimage1").src = src;
            });

            // 实现放大镜效果
            var Box = document.getElementById("shopLeftBox");
            var bigBox = document.getElementById("shopLeftBigBox");
            var bigbox = getChildNodes(bigBox)[0];//获取大盒子里面的img
            var lay = document.getElementById("lay");//一个正方形

            //鼠标移入时，将放大镜和bigBox显示出来
            Box.onmouseover = function () {
                lay.style.display = "block";
                bigBox.style.display = "block";
            }
            //鼠标移出时，将放大镜和bigBox隐藏起来
            Box.onmouseout = function () {
                lay.style.display = "none";
                bigBox.style.display = "none";
            }

            // 当鼠标在盒子里移动时
            Box.onmousemove = function (e) {
                e = e || event;//事件源的兼容问题
                var scale = 2;//图片的放缩比例
                //将鼠标放到放大镜的中间
                var x = e.clientX - lay.offsetWidth / 2;
                var y = e.clientY - lay.offsetHeight / 2;
                //将放大镜的宽高与盒子的宽高结合起来按比例放缩
                lay.style.width = parseInt(Box.offsetWidth / scale) + "px";
                lay.style.height = parseInt(Box.offsetHeight / scale) + "px";
                //设置大图片的宽高
                bigbox.style.width = Box.offsetWidth * scale + "px";
                bigbox.style.height = Box.offsetHeight * scale + "px";

                let X = $(Box).offset().left;
                let Y = $(Box).offset().top - $(document).scrollTop();
                let lb = X;  //左
                let rb = X + Box.offsetWidth - lay.offsetWidth;//右
                let ub = Y;//上
                let db = Y + Box.offsetWidth - lay.offsetWidth;//下

                x = x < lb ? lb : x;
                x = x >= rb ? rb : x;
                y = y < ub ? ub : y;
                y = y >= db ? db : y;

                lay.style.left = x - X + "px";//相对于父亲的偏移量
                lay.style.top = y - Y + "px";

                var left = lay.offsetLeft * scale;//相对父亲的偏移量
                var top = lay.offsetTop * scale;
                bigbox.style.marginLeft = (left * (-1)) + "px";
                bigbox.style.marginTop = (top * (-1)) + "px";


            }

            /* $('body').mousemove(function(e){
                e = e || event;//事件源的兼容问题
                var scale = 4;//图片的放缩比例
                //将鼠标放到放大镜的中间
                var x = e.clientX - lay.offsetWidth / 2;
                var y = e.clientY - lay.offsetHeight / 2;
                // console.log(e.clientX, e.clientY);
            }); */
        });

        //获取孩子元素的节点
        function getChildNodes(element) {
            var arr = [];
            var eList = element.childNodes;
            for (var i = 0; i < eList.length; i++) {
                if (eList[i].nodeType == 1) { //过滤空白节点
                    arr.push(eList[i]);
                }
            }
            return arr;
        }
    </script>
</body>

</html>